<template>
    <div class="ul_wrapper">
        <div class="li_wrapper" v-for="card in treeData" :key="card._id" :class="{ open: card.open }">
            <div class="item group" v-if="card.group" @click="toggleOpen(card)">
                <svg class="Icon arrow">
                    <use xlink:href="#arrow-down"></use>
                </svg>
                <svg class="Icon">
                    <use xlink:href="#file"></use>
                </svg>
                {{ card.name }}
            </div>
            <div class="item" v-else @click="selectCard(card)">
                <img class="thumb" :src="card.image" alt="" />
                {{ card.name }}
            </div>
            <layerAdmin class="group_wrapper" :tree-data="card.cardJson.initProp.cards" />
        </div>
    </div>
</template>
<script setup>
import layerAdmin from './layer-admin.vue'
import { userCardStore } from '../../store/userCardStore'
const cardStore = userCardStore()
const props = defineProps({
    treeData: {
        type: Array,
        default() {
            return []
        },
    },
})
const toggleOpen = (card) => {
    card.open = !card.open
}

const selectCard = (card) => {
    cardStore.clearControl()
    cardStore.curComponet = card
    cardStore.comControl(card, true)
}
</script>
<style lang="less" scoped>
.ul_wrapper {
    font-size: 12px;
    user-select: none;

    .item {
        padding: 0 12px 0 64px;
        position: relative;
        height: 36px;
        line-height: 36px;
        color: rgba(0, 0, 0, 0.7);
        cursor: pointer;

        &:hover {
            background: #ecf5ff;
            // color: #fff;
        }

        &.group {
            padding-left: 12px;
            display: flex;
            align-items: center;

            .Icon {
                margin-right: 8px;
            }

            .Icon.arrow {
                font-size: 10px;
                transition: transform 0.3s;
                transform: rotate(0);
            }
        }

        .thumb {
            position: absolute;
            top: 50%;
            left: 12px;
            margin-top: -12px;
            width: 40px;
            height: 24px;
        }
    }

    .li_wrapper {
        &.open {
            &>.group {
                .Icon.arrow {
                    transform: rotate(-90deg);
                }
            }

            &>.group_wrapper {
                padding-left: 20px;
                visibility: visible;
                height: auto;
            }
        }

        .group_wrapper {
            visibility: hidden;
            height: 0;
            overflow: hidden;
        }
    }
}
</style>
